<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表案例</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">


    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>Id:
                <input type="text" class="form-control" v-model="id">
            </label>

            <label>Name:
                <!--   按键修饰符  @keyup.enter   回车键 响应事件  -->
                <input type="text" class="form-control" v-model="name" @keyup.enter="add()">
            </label>

            <!--     在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果添加了小括号，就可以给函数传参了    如：add / add()/ add(item.id)   -->
            <input type="button" value="添加" @click="add()" class="btn btn-primary">


            <label>搜索名称关键字：
                <input type="text" class="form-control" v-model="keywords">
            </label>

        </div>
    </div>


    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
        </tr>
        </thead>
        <tbody>
        <!--        <tr v-for="item in list" :key="item.id">-->
        <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{ item.id }}</td>
            <!--            <td>{{ item.name }}</td> -->
            <td v-text="item.name"></td>
            <td>{{ item.ctime | dateFormat("yyyy-mm-dd -")}}</td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>

<script>

    //自定义全局按键修饰符 （https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6）
    Vue.config.keyCodes.enter = 13

    //定义 全局过滤器   'dateFormat'：过滤器名称， function第一个参数是 调用过滤器时的 管道('|') 的 前面的值，可以传递：第二，三，等多个参数
    Vue.filter('dateFormat', function (data, pattern = '') {
        var dt = new Date(data)

        var year = dt.getFullYear()
        var month = (dt.getMonth() + 1).toString().padStart(2, "0")
        var day = dt.getDate().toString().padStart(2, "0")

        //String.padStart(targetLength, padString)
        //String.padEnd(targetLength, padString)


        if (pattern.toLowerCase() == "yyyy-mm-dd") {
            return `${year}-${month}-${day}`
        } else {
            var hh = dt.getHours().toString().padStart(2, "0")
            var mm = dt.getMinutes().toString().padStart(2, "0")
            var ss = dt.getSeconds().toString().padStart(2, "0")

            return `${year}-${month}-${day} ${hh}:${mm}:${ss}`
        }
    })

    //创建Vue实例，得到ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '',

            list: [
                {id: 1, name: '宝马', ctime: new Date()},
                {id: 2, name: '奔驰', ctime: new Date()},
                {id: 3, name: '法拉利', ctime: new Date()},
            ],
        },
        methods: {
            add() {
                console.log('---add ')
                if (this.id == '' || this.name == '') {
                    return
                }
                var car = {id: this.id, name: this.name, ctime: new Date()}
                this.list.push(car)

                this.id = this.name = ''//添加成功后，清空输入框的内容
            },
            del(id) {//根据Id删除操作
                console.log('---del---')

                //方式一：使用数组的 some() 函数
                // this.list.some((item, position) => {
                //
                //     if (item.id == id) {
                //
                //         //删除数组的中的元素
                //         this.list.splice(position, 1)
                //
                //         //在数组的 some() 方法中，如果 return true，就会立即终止这个数组的后续循环。
                //         //这个some()函数会返回 这个被删除的元素（如果没有找到，就返回 空数组 [] ）
                //         return true
                //     }
                // })

                //方式二：使用数组的 findIndex()函数
                var position = this.list.findIndex((item) => {
                    if (item.id == id) {
                        //在数组中 findIndex() 方法中，如果 return true，就会立即终止这个数组的后续循环。
                        //这个findIndex()函数会返回 这个元素的角标（如果没有找到，就返回 -1）
                        return true
                    }
                })

                console.log('position = ' + position)
            },

            search(keywords) {//根据关键字keywords搜索
                var newList = []

                //方式一：
                // this.list.forEach(item => {
                //
                //     //方式1：使用 String.includes()// 判断字符串是否包含指定的子字符串 ，区分大小写
                //     if (item.name.includes(keywords)) {
                //         newList.push(item)
                //     }
                // })

                //清空数组
                // newList.splice(0, newList.length)

                //方式二： 使用数组的 filter() 方法： 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
                newList = this.list.filter((item) => {

                    //方式2：使用 String.indexOf() // 返回某个指定的字符串值在字符串中首次出现的位置。 ，区分大小写
                    if (item.name.indexOf(keywords) != -1) {
                        return true
                    }
                })

                return newList
            },
        },
    })
</script>

</body>
</html>
